<template>
  <div style="margin-top:30px">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="店铺编码" prop="shopCode"  style="margin-right:15px" label-width="100px">
              <el-input v-model="form.shopCode" :disabled=' isDisabled || operationType==="edit" ' placeholder="请输入店铺编码"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="店铺名称" prop="name"  style="margin-right:15px" label-width="100px">
              <el-input v-model="form.name" :disabled=' isDisabled || operationType==="edit" ' placeholder="请输入店铺名称" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="ISV店铺编码" prop="isvCode" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.isvCode" :disabled='isDisabled' :placeholder="operationType == 'detail'  ? ' ' : '请输入ISV店铺编码' "/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="店铺类型" prop="shopType" style="margin-right:15px" label-width="100px">
              <el-select v-model="form.shopType" :disabled='isDisabled' clearable style="width: 220px" :placeholder="operationType == 'detail' ? ' ' : '请选择店铺类型' ">
                <el-option v-for="item in shopTypeList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="接口key" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.appKey" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入接口key' " />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="接口secret" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.appSecret" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入接口secret' "  />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="授权token" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.accessToken" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入授权token' " />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="刷新token" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.refreshToken" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入刷新token' "  />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="销售平台" prop="sourcePlatformCode" style="margin-right:15px" label-width="100px">
              <el-select v-model="form.sourcePlatformCode" :disabled='isDisabled' clearable style="width: 220px" @change="changeSourcePlatform" :placeholder="operationType == 'detail' ? ' ' : '请选择销售平台' ">
                  <el-option v-for="item in salePlatformList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
         <el-col :span="12">
          <div class="grid-content bg-purple" v-if="form.sourcePlatformCode === 'JD'">
            <el-form-item label="京东面单类型" style="margin-right:15px" label-width="100px">
              <el-select v-model="form.platformShopCode" :disabled='isDisabled' clearable   style="width: 220px" :placeholder="operationType == 'detail' ? ' ' : '请选择京东面单类型' ">
                <el-option value="eCustomerCode" label="无界"/>
                <el-option value="ewCustomerCode" label="自营"/>
              </el-select>
            </el-form-item>
          </div>
          <div class="grid-content bg-purple" v-else>
            <el-form-item label="平台店铺" prop="platformShopCode" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.platformShopCode" :disabled='isDisabled || form.sourcePlatformCode === "JD" '  style="width: 220px" :placeholder="operationType == 'detail' ? ' ' : '请输入平台店铺编码' "/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="事业部名称" prop="shipmentName" style="margin-right:15px" label-width="100px">
              <el-select v-model="form.shipmentCode"  :disabled='isDisabled' clearable @change="changeShipment" style="width: 220px" :placeholder="operationType == 'detail' ? ' ' : '请选择事业部名称' ">
                <el-option v-for="item in shipmentsList" :key="item.partyCode" :label="item.userName" :value="item.partyCode" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="事业部编码" prop="shipmentCode"  style="margin-right:15px" label-width="100px">
              <el-input v-model="form.shipmentCode" disabled :placeholder="operationType == 'detail'? ' ' : '请输入事业部编码' "/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商家名称" prop="merchantsName"  style="margin-right:15px" label-width="100px">
              <el-input v-model="form.merchantsName" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入商家名称' " />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商家编码" prop="merchantsCode" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.merchantsCode" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入商家编码' "  />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系人" prop="contacts" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.contacts" :disabled='isDisabled' :placeholder="operationType == 'detail'? ' ' : '请输入联系人' "  />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系电话" prop="phone" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.phone" :disabled='isDisabled' placeholder="请输入联系电话"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="邮箱" prop="email" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.email" :disabled='isDisabled' maxlength="40" :placeholder="operationType == 'detail' ? ' ' : '请输入邮箱' "  />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="传真" prop="fax"  style="margin-right:15px" label-width="100px">
              <el-input v-model="form.fax" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入传真' " />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="地址" prop="address" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.address" :disabled='isDisabled' :placeholder="operationType == 'detail'? ' ' : '请输入地址' " />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" prop="remark"  style="margin-right:15px" label-width="100px" >
              <el-input v-model="form.remark" :disabled='isDisabled' :placeholder="operationType == 'detail'? ' ' : '请输入备注' " />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="访问地址" prop="accessAddress" style="margin-right:15px" label-width="100px">
              <el-input v-model="form.accessAddress" :disabled='isDisabled' :placeholder="operationType == 'detail'? ' ' : '请输入访问地址' " />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer w240" v-if="this.operationType === 'audit'">
      <el-button type="primary" @click="audit('1')">审核通过</el-button>
      <el-button type="danger" @click="audit('2')">审核不通过</el-button>
    </div>
    <div slot="footer" class="dialog-footer" v-if="!isDisabled">
      <el-button type="primary" @click="submitData" :disabled='isDisabled' plain>确 定</el-button>
    </div>
  </div>
</template>
<script>
  import Qs from 'qs'
  import {
    shopGetDetail,
    shopGetEdit,
    shopGetAdd,
    shopAudit,
    getDictList,
    getShipments
  } from '@/api/basicInfo'
  import {
  validatePhone,
  validateFax,
  validEmail,
} from "@/utils/validate.js";
  export default {
    name: 'shopAdministrationEdit',
    props: {
      operationType: {
        type: String,
        default: 'add'
      },
      operationCode: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        isDisabled: ['detail', 'audit'].includes(this.operationType),
        form: {
          shopCode:'',
          name:'',
          isvCode:'',
          shopType:'',
          sourcePlatformCode:'',
          platformShopCode:'',
          shipmentName:'',
          shipmentCode:'',
          merchantsName:'',
          merchantsCode:'',
          contacts:'',
          phone:'',
          email:'',
          fax:'',
          address:'',
          remark:'',
          status: '0',
        },
        rules: {
          shopCode:[  {required: true, message: '请输入店铺编码', trigger: 'blur'},
            { max: 64, message: "长度不能超过64个字符",trigger: 'change'}],
          platformShopCode: [
            {required: false, message: '请输入平台店铺编码', trigger: 'change'},
            { max: 64, message: "长度不能超过64个字符",trigger: 'change'}
          ],
          name: [
            {required: true, message: '请输入店铺名称', trigger: 'blur'},
            { max: 64, message: "长度不能超过64个字符",trigger: 'blur'}
          ],
          phone: [
            {
              required: true,
              validator(rule, value, callback) {
                validatePhone(value)
                  ? callback()
                  : callback(new Error("手机号格式有误"));
              },
              trigger: "blur",
            },
          ],
          email:[
            {
              validator(rule, value, callback) {
                // 当数据为空时，不进行校验
                if (!value) {
                  return callback()
                }
                validEmail(value)
                  ? callback()
                  : callback(new Error("邮箱格式有误"));
              },
              trigger: "change",
            },
          ],
          contacts:[
             { required: false,  max: 36, message: "长度不能超过36个字符", trigger: "change" },
          ],
          //  商家名称
          merchantsName: [
            { required: false,  max: 64, message: "长度不能超过64个字符", trigger: "change" },
          ],
          // 传真
          fax: [
            {
              validator(rule, value, callback) {
                // 当数据为空时，不进行校验
                if (!value) {
                  return callback()
                }
                validateFax(value)
                  ? callback()
                  : callback(new Error("传真格式有误"));
              },
              trigger: "change",
            },
          ],
          //  备注
          remark: [
               { required: false,  max: 64, message: "长度不能超过64个字符", trigger: "change" },
          ],
           address:[
             {required: false, max: 64, message: "长度不能超过64个字符", trigger: "change" },
          ],
          // 商家编码
          merchantsCode:[
             {required: false, max: 64, message: "长度不能超过64个字符", trigger: "change" },
          ],
          merchantsName:[
             {required: false, max: 64, message: "长度不能超过64个字符", trigger: "change" },
          ],
          accessAddress: [{ pattern: /^(?:(http|https):\/\/)?((?:[\w-]+\.)+[a-z0-9]+)((?:\/[^/?#]*)+)?(\?[^#]+)?(#.+)?$/i, message: '访问地址有误！' }],
        },
        shipmentsList: [], //事业部名称下拉框列表数据
        shopTypeList: [], //店铺类型下拉框列表数据
        salePlatformList: [], //销售平台下拉框列表数据
      }
    },
    async mounted() {
      await getShipments().then(res=>{
        this.shipmentsList = res.data
      })
      await getDictList('shopType').then(res=>{
        this.shopTypeList = res.data[0].dictList
      })
      await getDictList('salePlatform').then(res=>{
        this.salePlatformList = res.data[0].dictList
      })
      if(this.operationType !='add'){
        this.getInfo()
      }
    },
    methods: {
      // 获取页面信息
      getInfo() {
         shopGetDetail(this.operationCode).then(res=>{
           if(res.status === 0){
             this.form = res.data
           }
         })
      },
      changeShipment(partyCode) {
        if (partyCode) {
          const { userName } = this.shipmentsList.find((item) => item.partyCode === partyCode)
          this.form.shipmentName = userName
        } else {
          this.form.shipmentName = ''
        }
      },
      // 提交数据 - 新增 or 编辑
      submitData() {
        // const parms = {
        //   createdBy: this.$store.getters.authorizeDataCode,
        //   createdName: this.$store.getters.name,
        // }

        this.$refs['form'].validate((valid) => {
          if (valid) {
            let parms = JSON.parse(JSON.stringify(this.form))
            let requestOperation = shopGetAdd
            if (this.operationType === 'add') {
              parms.createdBy = this.$store.getters.authorizeDataCode
              parms.createdName = this.$store.getters.name
            } else {
              parms.modifiedBy = this.$store.getters.authorizeDataCode
              parms.modifiedName = this.$store.getters.name
              requestOperation = shopGetEdit
            }
            requestOperation(parms).then(res=>{
              this.$message.success(res.msg);
              if(res.status === 0){
                this.$emit('operationComplete', this.operationType)
              }
            })
          } else {
            return this.$message.error('请检查所填内容');
          }
        });
      },
      // 店铺审核 - 通过 or 拒绝
      audit(status) {
        const params = {
          status,
          code: this.operationCode,
          approvedBy: this.$store.getters.code,
          approvedName: this.$store.getters.name
        }
        shopAudit(Qs.stringify(params)).then(res=>{
          this.$message.success(res.msg);
          if(res.status === 0){
            this.$emit('operationComplete', this.operationType)
          }
        })
      },
      changeSourcePlatform(code) {
        if (code === 'JD') this.form.platformShopCode = ''
      },
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
  .w240 {
    width: 240px;
  }
</style>

